<template>
  <div>接收信息</div>
  <button @click="handlesssClick">终止BroadcastChannel通信</button>
</template>

<script setup>
import { onBeforeUnmount, onMounted } from "vue";
import { receiveMessage, addCount, numberCount, reduceCount } from "./demo.js";
import piniaDtore from "../pinia的使用,pinia用来替代vuex/index";
const pinia = piniaDtore();
const stop = receiveMessage((obj) => {
  console.log(obj, 555555);
});
const beforeUnloadHandler = () => {
  alert("beforeunload");
  console.log("beforeunload");
  let number = +localStorage.getItem("&number");
  if (number >= 1) {
    number--;
    localStorage.setItem("&number", number);
    if (number == 0) {
      stop();
    }
  }
  window.removeEventListener("beforeunload", beforeUnloadHandler);
};
onMounted(() => {
  if (+localStorage.getItem("&number")) {
    if (sessionStorage.getItem("&number") != 1) {
      sessionStorage.setItem("&number", 1);
      localStorage.setItem("&number", +localStorage.getItem("&number") + 1);
    }
  } else {
    if (sessionStorage.getItem("&number") != 1) {
      sessionStorage.setItem("&number", 1);
    }
    localStorage.setItem("&number", 1);
  }
  window.addEventListener("beforeunload", beforeUnloadHandler);
});
const handlesssClick = () => {
  stop();
};
</script>

<style scoped>
[v-cloak] {
  display: none;
}
.box {
  display: inline-block;
  width: 150px;
}
</style>
